<template>
    <div>
        <div class="quanping">
            <el-row type="flex" justify="center">
                <el-col :span="16">
                    <div class="mohu">
                        <el-breadcrumb separator="/" class="suozai">
                            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>物业服务</el-breadcrumb-item>
                            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                        </el-breadcrumb>
                        <div class="fangke">
                            活动管理
                        </div>
                        <el-divider></el-divider>
                        <div class="cha">
                            <el-row type="flex" justify="center">
                                <el-col :span="22">
                                    <el-row>
                                        <el-col :span="12" class="kuang">
                                            活动标题：
                                            <el-input v-model="activityTitle" placeholder="请输入" class="xm" size="mini" clearable style="margin-left:20px;"></el-input>
                                        </el-col>
                                        <el-col :span="8" class="kuang">
                                            <el-button type="primary" size="mini" @click="getActivityList()">查询</el-button>
                                            <el-button size="mini" @click="chongzhi()">重置</el-button>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="16">
                    <div class="zhuye">
                        <el-row type="flex" justify="center">
                            <el-col :span="22">
                                <div class="piliang">
                                    <span style="float:left;">活动列表</span>
                                    <el-button size="mini" style="float:right;margin-top: 15px;">批量操作</el-button>
                                    <el-button type="primary" size="mini" style="float:right;margin-top: 15px;margin-right:10px;" @click="dialogFormVisible = true">新建</el-button>
                                </div>
                                <el-card>
                                    <el-table :data="activityData" border element-loading-text="数据加载中" @selection-change="handleSelectionChange" highlight-current-row fit v-loading="listLoading">
                                        <el-table-column type="selection" width="45"></el-table-column>
                                        <el-table-column align="center" label="活动标题" prop="activityTitle" width="230"/>
                                        <el-table-column label="作者" prop="author" width="120"/>
                                        <el-table-column label="发布状态" width="80">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.releaseState == '0'">未发布</span>
                                                <span v-if="scope.row.releaseState == '1'">已发布</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="浏览量" prop="views" width="100"/>
                                        <el-table-column label="发布人" prop="releasePeople" width="100"/>
                                        <el-table-column label="发布日期" prop="releaseDate" width="120"/>
                                        <el-table-column align="center" label="操作" width="180">
                                        <template slot-scope="scope">
                                            <el-button type="text" @click="reportFromCompile(scope.row)">编译</el-button>
                                            <el-button type="text" @click="reportFromDelete(scope.row.id)">删除</el-button>
                                        </template>
                                        </el-table-column>
                                    </el-table>
                                    <!-- 分页组件 -->
                                    <div class='block'>
                                        <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="currentPage4"
                                            :page-sizes="[5, 10, 15, 20]"
                                            :page-size="page.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="page.total">
                                        </el-pagination>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
            <!-- 新增弹框 -->
            <el-dialog :visible.sync='dialogFormVisible' class="slideDialog">
                <!-- 文件上传 -->
                <el-upload
                class='avatar-uploader'
                action=''
                :show-file-list='false'
                :on-success='handleAvatarSuccess'
                :before-upload='beforeAvatarUpload'
                >
                <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                </el-upload>
                <div :model='activityFrom' class="xinzen">
                    <div class="xinzen1">
                        <div style="float:left;">活动标题</div>
                        <el-input
                            style="width:200px;"
                            placeholder="请输入标题"
                            v-model="activityFrom.activityTitle"
                            clearable>
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">作者</div>
                        <el-input
                            style="width:200px;"
                            placeholder="请输入标题"
                            v-model="activityFrom.author"
                            clearable>
                        </el-input>
                    </div>
                    <div>
                        <quill-editor ref="text" v-model="activityFrom.ctivityDetails" class="editor" :options="editorOption"/>
                    </div>
                </div>
                <div slot='footer' class='dialog-footer'>
                    <el-button @click='dialogFormVisible = false'>取 消</el-button>
                    <el-button type='primary' @click="saveActivity()">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改弹框 -->
            <el-dialog :visible.sync='dialogFormVisibleEdit' class="slideDialog">
                <!-- 文件上传 -->
                <el-upload
                class='avatar-uploader'
                action=''
                :show-file-list='false'
                :on-success='handleAvatarSuccess'
                :before-upload='beforeAvatarUpload'
                >
                <img v-if='imageUrl' :src='imageUrl' class='avatar' />
                <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                </el-upload>
                <div :model='activityFromEdit' class="xinzen">
                    <div class="xinzen1">
                        <div style="float:left;">活动标题</div>
                        <el-input
                            style="width:200px;"
                            placeholder="请输入标题"
                            v-model="activityFromEdit.activityTitle"
                            clearable>
                        </el-input>
                    </div>
                    <div class="xinzen1">
                        <div style="float:left;">作者</div>
                        <el-input
                            style="width:200px;"
                            placeholder="请输入标题"
                            v-model="activityFromEdit.author"
                            clearable>
                        </el-input>
                    </div>
                    <div>
                        <quill-editor ref="text" v-model="activityFromEdit.ctivityDetails" class="editor" :options="editorOption"/>
                    </div>
                </div>
                <div slot='footer' class='dialog-footer'>
                    <el-button @click='dialogFormVisibleEdit = false'>取 消</el-button>
                    <el-button type='primary' @click="editActivity()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
	data () {
        return{
            editorOption: {},
            activityTitle:'', // 活动标题
            imageUrl: '',
            activityData:[], // 活动信息
            listLoading: true, // 是否显示loading信息
            // 分页对象
			page: {
				// 每页条数
				pageSize: 10,
				// 分页页数
				pageNum: 1,
				// 分页总条数
				total: 0
			},
            activityFrom: {
                activityTitle:'',
                author:'',
                ctivityDetails:''
            },
            activityFromEdit: {
                id:0,
                activityTitle:'',
                author:'',
                ctivityDetails:''
            },
            currentPage4: 1,
            loading: false,//上传的loading
            listLoading: true, // 是否显示loading信息
            dialogFormVisible:false,
            dialogFormVisibleEdit:false,
            imageUrl: '',
        }
    },
    mounted () {
		this.getActivityList()
	},
    methods: {
        handleAvatarSuccess (res, file) {
			this.imageUrl = URL.createObjectURL(file.raw)
		},
        beforeAvatarUpload (file) {
			const isJPG = file.type === 'image/jpeg'
			const isPNG = file.type === 'image/png'
			const isLt2M = file.size / 1024 / 1024 < 2
			if (!isJPG && !isPNG) {
				this.$message.error('上传头像图片只能是 JPG 和 PNG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!')
			}
			this.imageUrl = URL.createObjectURL(file)
			this.imageFile = file
			return false
		},
        chongzhi(){
            location.reload()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getActivityList()
		},
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getActivityList()
		},
        //获取活动列表信息
        getActivityList () {
            this.$axios.get('/memberZx/activity/getActivityList',{params: {
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize,
                    activityTitle: this.activityTitle,
                    vid: window.sessionStorage.getItem("vid")
				}
            }).then(res => {
                if (res.data != null) {
                    this.activityData = res.data.obj.content
                    this.page.total = res.data.obj.total
                    this.listLoading = false
                }
            })
        },
        //新增活动
        saveActivity(){
            var formdata = new FormData()
            formdata.set('activityTitle', this.activityFrom.activityTitle)
            formdata.set('author', this.activityFrom.author)
            formdata.set('ctivityDetails', this.activityFrom.ctivityDetails)
            formdata.set('releasePeople',localStorage.getItem("name"))
            formdata.set('residentialQuartersId', window.sessionStorage.getItem("vid"))
            if (this.imageFile.name !== 'File') {
                formdata.set('file', this.imageFile, this.imageFile.name)
            }
            this.$axios.post('/memberZx/activity/saveActivity', formdata)
            .then(res => {
                this.message('新增成功', 'success')
                this.getActivityList()
                this.dialogFormVisible = false
                this.activityFrom = {
                    activityTitle:'',
                    author:'',
                    picture: '',
                    ctivityDetails:''
                },
                this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
                this.imageUrl = ''
            })
        },
        // 修改菜单信息
        editActivity () {
            var formdata = new FormData()
            formdata.set('id', this.activityFromEdit.id)
            formdata.set('activityTitle', this.activityFromEdit.activityTitle)
            formdata.set('author', this.activityFromEdit.author)
            formdata.set('ctivityDetails', this.activityFromEdit.ctivityDetails)
            formdata.set('releasePeople',localStorage.getItem("name"))
            if (this.imageFile.name !== 'File') {
                formdata.set('file', this.imageFile, this.imageFile.name)
            }
            this.$axios.post('/memberZx/activity/editActivity', formdata)
            .then(res => {
                if(res.data){
                    this.message('修改成功', 'success')
                    this.getActivityList()
                    this.dialogFormVisibleEdit = false
                    this.activityFromEdit = {
                        id: 0,
                        activityTitle:'',
                        author:'',
                        picture: '',
                        ctivityDetails:''
                    },
                    this.imageUrl = ''
                    this.imageFile = File
                    this.saveBtnDisabled = false; //保存按钮是否禁用（避免重复提交）
                }else {
                    this.message('修改失败', 'warning')
                }
            })
        },
        // 修改菜单信息回调赋值
        reportFromCompile (activityFromEdit) {
            this.dialogFormVisibleEdit = true
            this.activityFromEdit = activityFromEdit
            this.imageUrl = activityFromEdit.picture
        },
        // 删除提示弹框
        reportFromDelete (row) {
        this.$confirm('此操作将永久删除该报修单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                this.deleteActivity(row)
            })
            .catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                })
            })
        },
        // 删除菜单列表信息
        deleteActivity (id) {
        this.$axios.delete('/memberZx/activity/deleteActivity?id=' + id).then(res => {
            this.message('删除成功', 'success')
            this.getActivityList()
        })
        },
        message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
    }
}
</script>
<style lang="css" scoped>
/* 上传附件样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.slideDialog{
  text-align: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.quanping{
    width:100%;
    height:980px;
    background-color:#F0F2F5;
}
.mohu{
    margin-top: 40px;
    width:100%;
    height:180px;
    background-color:white;
}
.zhuye{
    margin-top: 40px;
    width:100%;
    height:620px;
    background-color:white;
}
.suozai{
    padding-top: 10px;
    padding-left: 20px;
    font-size: 14px;
}
.fangke{
    padding-top: 20px;
    padding-left: 20px;
    font-size: 18px;
    font-weight: bold;
}
.cha{
    width: 100%;
    height: 50px;
    font-size: 14px;
}
.kuang{
    height: 50px;
    line-height: 50px;
}
.xm{
    width: 200px;
}
.piliang{
    margin-top: 10px;
    width: 100%;
    height: 50px;
}
.xinzen{
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
.xinzen1{
    width: 300px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}
.div1{
    height: 120px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.div2{
    height: 250px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.div3{
    height: 100px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.editor{
    width: 600px;
    height: 200px;
}
</style>